<template>
    <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps<{
    options: echarts.EChartsOption;
}>();

const chart = ref<HTMLDivElement>();
let instance: echarts.ECharts | null = null;

onMounted(() => {
    instance = echarts.init(chart.value);
    instance.setOption(props.options);
});

watch(() => props.options, (newOptions) => {
    if (instance) {
        instance.setOption(newOptions);
    }
}, { deep: true });
</script>

<style scoped>
/* 添加你的样式 */
</style>
